<!-- 
              分配权限：(编辑功能)
              1创建一个基本的弹框
              2点击分配权限显示弹框
              3完成结构
              4.获取数据
              5转换数据为树形结构
              6处理默认勾选（通过id）
              7实现修改分配权限 定义api 导入使用
             -->
<template>
  <!-- 
   1:完成页面基本结构
   2：定义获取权限数据api
   3：导入调用
   4：渲染（渲染成树形结构）
     a:获取完数据进行树形结构 转换
        父级的id就是子级的pid

        table渲染成树形数据：
          1：每一项数据都有children
          2:在el-table上有属性row-key=“该条数据的唯一标识（每一行数据的标识对应字段名）”

    添加：
      1：创建一个新增弹框组件
      2：要父级列表导入使用
      3：点击相应按钮打开弹框
      4：完成基本布局
      5：完成表单验证
           传入原始列表数据
           在表单验证时，全部匹配，只要有重复不允许通过
      6：定义新增api
      7:导入调用
          调用完成：
            提示
            关闭弹框
            清空列表数据
            刷新父级列表数据

      删除：
         1：绑定删除事件，传入id
         2:定义删除api
         3:删除事件
            来一个确定弹框
            点击确定后调用删除api,
            删除成功 
               提示
               删除列表数据
    编辑：
       1：编辑绑定相应的点击事件，传入当前行数据
       2：编辑事件中
           a:打开弹框
           b:传入一个相应标识 用于区别新增还是编辑
           c:传入相应数据
              如果当前行数据包含编辑所有所有字段，直接深拷贝当前行数据
              如果当前行数据 不 包含编辑所有所有字段，通过id调用接口获取完整 数据
       3：看表单验证是否需要调用
           传入原始列表数据
           在表单验证时，除了自身以外的做匹配，只要有重复不允许通过
          
       4：定义编辑api
       5:在点击确定后分场景调用（新增与编辑场景）
       6:还需要处理标题

 -->
  <div class="permission content">
    <el-card>
      <div style="text-align:right">
        <el-button type="primary" @click="addClick(1, '0')">添加菜单</el-button>
      </div>
    </el-card>
    <el-card>
      <el-table :data="list" row-key="id">
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column label="权限标识" prop="code"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="addClick(1, row.id)"
                >添加菜单</el-button
              >
              <el-button type="text" @click="addClick(2, row.id)"
                >添加按钮</el-button
              >
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹框 -->
    <Add :initList="initList" :isShow.sync="show" ref="add"></Add>
  </div>
</template>
<script>
import { sysPermission, sysPermissionDel } from '@/api/permission'
import Add from './components/Add.vue'
export default {
  data () {
    return {
      initList: [],
      list: [],
      show: false // 是否显示新增弹框
    }
  },
  components: {
    Add
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await sysPermission()
      this.initList = res
      this.list = this.changeData(res, '0')
      window.console.log('权限列表:', this.list)
    },
    // 树形数据转换
    changeData (arr, pid) {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击事件
    addClick (type, pid) {
      this.show = true
      this.$refs.add.setFormValue(type, pid)
    },
    // 删除事件
    del (id) {
      this.$confirm('您确定删除该项吗？')
        .then(async () => {
          await sysPermissionDel(id)
          this.$message.success('删除成功')
          this.getData()
        })
        .catch(() => {})
    },
    // 编辑
    edit (row) {
      this.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      // function  undefined
      window.console.log(row)
    }
  }
}
</script>
<style></style>
